<template>
  <Page>
    <p-header title="Settings"/>
    <StackLayout class="container">
      <GridLayout class="line" columns="*, auto, auto">
        <label text="Currency" col="0" class="title" verticalAlignment="center"/>
        <label text="Dollar (USD)" col="1" class="desc" verticalAlignment="center"/>
        <Image col="2" src="~/images/arrow_right.png" class="indicator"/>
      </GridLayout>
      <Button v-if="isLogin" class="sign-out" text="Sign Out" @tap="signOut"/>
    </StackLayout>
  </Page>
</template>
<script>
import Header from '~/components/common/Header'
require( "nativescript-localstorage" )
import {dataBus} from '~/business/DataBus'

export default {
  data() {
    return {
      isLogin: false,
      currency: 'USD'
    }
  },
  mounted() {
    this.isLogin = !!localStorage.getItem('token')
    const curr = localStorage.getItem('currency')
    if (curr) {
      this.currency = curr
    }
  },
  components: {
    'p-header': Header,
  },
  methods: {
    signOut() {
      confirm({
        title: "Confirm",
        message: "Are you sure to leave now?",
        okButtonText: "sure",
        cancelButtonText: "cancel"
      }).then(result => {
        if (result) {
          localStorage.removeItem('token')
          this.isLogin = false
        }
      });
    },
    choose() {
      const self = this
      dataBus.loadCurrency({
        onError: (code, msg) => {
          alert(msg)
        },
        onSuccess:(ret) => {
          let fullNames = ret.map(item => item.fullName)
           action("Please select a currency", "Cancel", fullNames)
            .then(result => {
              if (result != 'Cancel') {
                self.currency = result
                localStorage.setItem('currency', result)
              }
            });
        }
      })
     
    }
  }
}
</script>
<style scoped>
.container {
  background: #15273E;
}
.line, .sign-out {
  height: 50;
  padding-left: 12;
  padding-right: 12;
  border-bottom-color: #274867;
  border-bottom-width: 1;
  background: #203956;
}
.title {
  color: white;
  font-size: 16;
}
.desc {
  color: #6292BE;
  font-size: 16;
}
.indicator {
  width: 18;
  height: 18;
  margin-left: 10;
}
.sign-out {
  color: white;
  font-size: 16;
  margin-top: 20;
}
</style>
